<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_AutoComplete.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_AutoComplete.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {

	  &quot;use strict&quot;; // jshint ;_;


	 /* TYPEAHEAD PUBLIC CLASS DEFINITION
	  * ================================= */
	  
	  /**
	   * 输入完成组件，对原生的Bootstrap2 TypeHead稍作修改
	   * @class AutoComplete
	   * @constructor
	   * @example		
	   * 	js代码
	   *	var data = [&quot;zoo&quot;,&quot;yui&quot;,&quot;x-men&quot;,&quot;apple&quot;,&quot;asia&quot;,&quot;boy&quot;,&quot;baby&quot;,&quot;cisco&quot;,&quot;disco&quot;,&quot;easy&quot;,&quot;fire&quot;,&quot;google&quot;,&quot;go&quot;];
	   * 	$(&quot;#username&quot;).autocomplete({
	   * 		source:data
	   *	});
	   * 	html代码
	   * 	&lt;input type=&quot;text&quot; id=&quot;username&quot;&gt;	
	   */
	  var AutoComplete = function (element, options) {
	    this.$element = $(element);
	    this.options = $.extend({}, $.fn.autocomplete.defaults, options);
	    this.matcher = this.options.matcher || this.matcher;
	    this.sorter = this.options.sorter || this.sorter;
	    this.highlighter = this.options.highlighter || this.highlighter;
	    this.updater = this.options.updater || this.updater;
	    this.source = this.options.source;
	    this.$menu = $(this.options.menu);
	    this.shown = false;
	    this.listen();
	  };

	  AutoComplete.prototype = {
	    
	    constructor: AutoComplete, 
	    
	    
	    select: function () {
	      var val = this.$menu.find(&#x27;.active&#x27;).attr(&#x27;data-value&#x27;);
	      this.$element
	        .val(this.updater(val))
	        .change();
	      return this.hide();
	    }

	  , updater: function (item) {
	      return item;
	    }

	  , show: function () {
	      var pos = $.extend({}, this.$element.position(), {
	        height: this.$element[0].offsetHeight
	      });

	      this.$menu
	        .insertAfter(this.$element)
	        .css({
	          top: pos.top + pos.height
	        , left: pos.left
	        })
	        .show();

	      this.shown = true;
	      return this;
	    }

	  , hide: function () {
	      this.$menu.hide();
	      this.shown = false;
	      return this;
	    }

	  , lookup: function (event) {
	      var items;

	      this.query = this.$element.val();

	      if (!this.query || this.query.length &lt; this.options.minLength) {
	        return this.shown ? this.hide() : this;
	      }

	      items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source;

	      return items ? this.process(items) : this;
	    }

	  , process: function (items) {
	      var that = this;

	      items = $.grep(items, function (item) {
	        return that.matcher(item);
	      });

	      items = this.sorter(items);

	      if (!items.length) {
	        return this.shown ? this.hide() : this;
	      }

	      return this.render(items.slice(0, this.options.items)).show();
	    }

	  , matcher: function (item) {
	      return ~item.toLowerCase().indexOf(this.query.toLowerCase());
	    }

	  , sorter: function (items) {
	      var beginswith = []
	        , caseSensitive = []
	        , caseInsensitive = []
	        , item;

	      while (item = items.shift()) {
	        if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item);
	        else if (~item.indexOf(this.query)) caseSensitive.push(item);
	        else caseInsensitive.push(item);
	      }

	      return beginswith.concat(caseSensitive, caseInsensitive);
	    }

	  , highlighter: function (item) {
	      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, &#x27;\\$&amp;&#x27;);
	      return item.replace(new RegExp(&#x27;(&#x27; + query + &#x27;)&#x27;, &#x27;ig&#x27;), function ($1, match) {
	        return &#x27;&lt;strong&gt;&#x27; + match + &#x27;&lt;/strong&gt;&#x27;;
	      });
	    }

	  , render: function (items) {
	      var that = this;

	      items = $(items).map(function (i, item) {
	        i = $(that.options.item).attr(&#x27;data-value&#x27;, item);
	        i.find(&#x27;a&#x27;).html(that.highlighter(item));
	        return i[0];
	      });

	      items.first().addClass(&#x27;active&#x27;);
	      this.$menu.html(items);
	      return this;
	    }

	  , next: function (event) {
	      var active = this.$menu.find(&#x27;.active&#x27;).removeClass(&#x27;active&#x27;)
	        , next = active.next();

	      if (!next.length) {
	        next = $(this.$menu.find(&#x27;li&#x27;)[0]);
	      }

	      next.addClass(&#x27;active&#x27;);
	    }

	  , prev: function (event) {
	      var active = this.$menu.find(&#x27;.active&#x27;).removeClass(&#x27;active&#x27;)
	        , prev = active.prev();

	      if (!prev.length) {
	        prev = this.$menu.find(&#x27;li&#x27;).last();
	      }

	      prev.addClass(&#x27;active&#x27;);
	    }

	  , listen: function () {
	      this.$element
	        .on(&#x27;focus&#x27;,    $.proxy(this.focus, this))
	        .on(&#x27;blur&#x27;,     $.proxy(this.blur, this))
	        .on(&#x27;keypress&#x27;, $.proxy(this.keypress, this))
	        .on(&#x27;keyup&#x27;,    $.proxy(this.keyup, this));

	      if (this.eventSupported(&#x27;keydown&#x27;)) {
	        this.$element.on(&#x27;keydown&#x27;, $.proxy(this.keydown, this));
	      }

	      this.$menu
	        .on(&#x27;click&#x27;, $.proxy(this.click, this))
	        .on(&#x27;mouseenter&#x27;, &#x27;li&#x27;, $.proxy(this.mouseenter, this))
	        .on(&#x27;mouseleave&#x27;, &#x27;li&#x27;, $.proxy(this.mouseleave, this));
	    }

	  , eventSupported: function(eventName) {
	      var isSupported = eventName in this.$element;
	      if (!isSupported) {
	        this.$element.setAttribute(eventName, &#x27;return;&#x27;);
	        isSupported = typeof this.$element[eventName] === &#x27;function&#x27;;
	      }
	      return isSupported;
	    }

	  , move: function (e) {
	      if (!this.shown) return;

	      switch(e.keyCode) {
	        case 9: // tab
	        case 13: // enter
	        case 27: // escape
	          e.preventDefault();
	          break;

	        case 38: // up arrow
	          e.preventDefault();
	          this.prev();
	          break;

	        case 40: // down arrow
	          e.preventDefault();
	          this.next();
	          break;
	      }

	      e.stopPropagation();
	    }

	  , keydown: function (e) {
	      this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]);
	      this.move(e);
	    }

	  , keypress: function (e) {
	      if (this.suppressKeyPressRepeat) return;
	      this.move(e);
	    }

	  , keyup: function (e) {
	      switch(e.keyCode) {
	        case 40: // down arrow
	        case 38: // up arrow
	        case 16: // shift
	        case 17: // ctrl
	        case 18: // alt
	          break;

	        case 9: // tab
	        case 13: // enter
	          if (!this.shown) return
	          this.select();
	          break;

	        case 27: // escape
	          if (!this.shown) return
	          this.hide();
	          break;

	        default:
	          this.lookup();
	      }

	      e.stopPropagation();
	      e.preventDefault();
	  }

	  , focus: function (e) {
	      this.focused = true;
	    }

	  , blur: function (e) {
	      this.focused = false;
	      if (!this.mousedover &amp;&amp; this.shown) this.hide();
	    }

	  , click: function (e) {
	      e.stopPropagation();
	      e.preventDefault();
	      this.select();
	      this.$element.focus();
	    }

	  , mouseenter: function (e) {
	      this.mousedover = true;
	      this.$menu.find(&#x27;.active&#x27;).removeClass(&#x27;active&#x27;);
	      $(e.currentTarget).addClass(&#x27;active&#x27;);
	    }

	  , mouseleave: function (e) {
	      this.mousedover = false;
	      if (!this.focused &amp;&amp; this.shown) this.hide();
	    }

	  };


	  /* TYPEAHEAD PLUGIN DEFINITION
	   * =========================== */

	  var old = $.fn.autocomplete;

	  $.fn.autocomplete = function (option) {
	    return this.each(function () {
	      var $this = $(this)
	        , data = $this.data(&#x27;koala.autocomplete&#x27;)
	        , options = typeof option == &#x27;object&#x27; &amp;&amp; option;
	      if (!data) $this.data(&#x27;koala.autocomplete&#x27;, (data = new AutoComplete(this, options)));
	      if (typeof option == &#x27;string&#x27;) data[option]();
	    });
	  };

	  $.fn.autocomplete.defaults = {
		/**
		 * 数据来源， 数组的形式
		 * @property source
		 * @type Array
		 * @default []
		 */
	    source: [],
	    /**
		 * 下拉菜单中显示的最大的条目数
		 * @property items
		 * @type Integer
		 * @default 8
		 */
	    items: 8, 
	    /**
		 * 下拉框菜单的默认html，不建议更改
		 * @property menu
		 * @type String
		 * @default &#x27;&lt;ul class=&quot;autocomplete dropdown-menu&quot;&gt;&lt;/ul&gt;&#x27;,
		 */
	    menu: &#x27;&lt;ul class=&quot;autocomplete dropdown-menu&quot;&gt;&lt;/ul&gt;&#x27;, 
	    /**
		 * 菜单menu子项，不建议更改
		 * @property item
		 * @type String
		 * @default &#x27;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;&#x27;
		 */
	    item: &#x27;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;&#x27;, 
	    /**
		 * 触发提示所需的最小字符个数
		 * @property minLength
		 * @type Integer
		 * @default 1
		 */
	    minLength: 1
	  };

	  $.fn.autocomplete.Constructor = AutoComplete;


	 /* TYPEAHEAD NO CONFLICT
	  * =================== */

	  $.fn.autocomplete.noConflict = function () {
	    $.fn.autocomplete = old;
	    return this;
	  };


	 /* TYPEAHEAD DATA-API
	  * ================== */

	  $(document).on(&#x27;focus.autocomplete.data-api&#x27;, &#x27;[data-provide=&quot;autocomplete&quot;]&#x27;, function (e) {
	    var $this = $(this);
	    if ($this.data(&#x27;koala.autocomplete&#x27;)) return
	    console.info(&quot;$this.data() = &quot; + $this.data());
	    $this.autocomplete($this.data());
	  });

}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
